$j.fn.panel=function(dir,id,option)
{
  var opt=option;//"'"+option+"'";
    switch (dir)
    {
        case 'left':
            $j('#'+id).resizable({handles:'e',minWidth:opt});
            break;
        case 'right':
            $j('#'+id).resizable({handles:'w',minWidth:opt});
            break;
        case 'top':
           $j('#'+id).resizable({handles:'s',minHeight:opt});
            break;
        case 'bottom':
            $j('#'+id).resizable({handles:'n',minHeight:opt});
            break;
    }
   $(document).ready(function(){
     if (dir=='left' || dir=='right')
     {
        $j('#'+id+'_1').height($j('#'+id).height()-2);
        $j('#'+id+'_1').width($j('#'+id).width()-6);
        if(!$j.browser.msie && dir=='right')
           $j('#'+id+'_1').width($j('#'+id).width()-3);
        else
           $j('#'+id+'_1').width($j('#'+id).width()-6);
        var _height=$j('#'+id+'_1').innerHeight()-22;
        $j('#'+id+'_contain').height(_height);
        $j('#'+id+'_hid_bar_text_'+dir).height(_height);
      }
     else if (dir=='top')
     {
        $j('#'+id+'_1').height($j('#'+id).height()-7);
        $j('#'+id+'_1').width($j('#'+id).width()-2);
        var _height=$j('#'+id+'_1').innerHeight()-22;
        $j('#'+id+'_contain').height(_height);
     }
     else if(dir=='bottom')
     {
        $j('#'+id+'_1').height($j('#'+id).height()-2);
        $j('#'+id+'_1').width($j('#'+id).width()-2);
        var _height=$j('#'+id+'_1').innerHeight()-27;
        $j('#'+id+'_contain').height(_height);
     }
   });
   $j(window).resize(function(){
   
     if (dir=='left' || dir=='right')
       {
        $j('#'+id+'_1').height($j('#'+id).height()-2);
        $j('#'+id+'_1').width($j('#'+id).width()-6);
        var _height=$j('#'+id+'_1').innerHeight()-22;
        $j('#'+id+'_contain').height(_height);
        $j('#'+id+'_hid_bar_text_'+dir).height(_height);
      }
      else if (dir=='top')
      {
        $j('#'+id+'_1').height($j('#'+id).height()-7);
        $j('#'+id+'_1').width($j('#'+id).width()-2);
        var _height=$j('#'+id+'_1').innerHeight()-22;
        $j('#'+id+'_contain').height(_height);
      }
      else if(dir=='bottom')
      {
         $j('#'+id+'_1').height($j('#'+id).height()-2);
         $j('#'+id+'_1').width($j('#'+id).width()-2);
         var _height=$j('#'+id+'_1').innerHeight()-27;
         $j('#'+id+'_contain').height(_height);
      }
    });

    $j('#'+id).resize(function(){
           if($('#'+id).css('right')=='0px')
              $('#'+id).css('left','auto');
           else if ($('#'+id).css('bottom')=='0px')
              $('#'+id).css('top','auto');
           if (dir=='left' || dir=='right')
             $j('#'+id+'_1').width($j('#'+id).width()-6);
           else if (dir=='top')
           {
              $j('#'+id+'_1').height($j('#'+id).height()-7);
              $j('#'+id+'_1').width($j('#'+id).width()-2);
              var _height=$j('#'+id+'_1').innerHeight()-22;
              $j('#'+id+'_contain').height(_height);
           }
          else if(dir=='bottom')
          { 
             $j('#'+id+'_1').height($j('#'+id).height()-2);
             //$j('#'+id+'_1').width($j('#'+id).width()-2);
             var _height=$j('#'+id+'_1').innerHeight()-27;
             $j('#'+id+'_contain').height(_height);
          }
   });
   //nav
   $j('#'+id+'_bar_nav_img').click(function(){
         $j.panelHide(id,dir);
   });
   $j('#'+id+'_bar_nav_img').mouseover(function(){
         $j('#'+id+'_bar_nav_img').css('background-color','#ffffff');
   });
   $j('#'+id+'_bar_nav_img').mouseout(function(){
         $j('#'+id+'_bar_nav_img').css('background-color','transparent');
   });
   //close
   $j('#'+id+'_bar_close_img').click(function(){
         $j.panelClose(id);
   });
   $j('#'+id+'_bar_close_img').mouseover(function(){
         $j('#'+id+'_bar_close_img').css('background-color','#ffffff');
   });
   $j('#'+id+'_bar_close_img').mouseout(function(){
         $j('#'+id+'_bar_close_img').css('background-color','transparent');
   });
   //hid nav
  
   $j('#'+id+'_hid_bar_nav_img_'+dir).click(function(){
         //if(dir=='bottom')
            //$('#'+id+'_title_bar').attr('class','panel_bar_bottom');
            //$('#'+id+'_title_bar_text'+dir).attr('class','panel_bar_text_bottom_1');
          $j.panelShow(id,dir);
   }); 
   $j('#'+id+'_hid_bar_nav_img_'+dir).mouseover(function(){
         $j('#'+id+'_hid_bar_nav_img_'+dir).css('background-color','#ffffff');
   });
    $j('#'+id+'_hid_bar_nav_img_'+dir).mouseout(function(){
         $j('#'+id+'_hid_bar_nav_img_'+dir).css('background-color','transparent');
   });
   //bid bar
   $j('#'+id+'_hid_bar_text_'+dir).click(function(){
         $('#'+id).resizable('disable');
         $('#'+id+'_bar_nav_img').hide();
         $('#'+id+'_bar_close_img').hide();   
         if(dir=='left')
            $('#'+id).animate({width: "toggle",left:'21px'}); 
         else if(dir=='right')
            $('#'+id).animate({width: "toggle",right:'21px'}); 
         else if(dir=='top')
            $('#'+id).animate({height: "toggle",top:'-1px'},'slow'); 
         else if(dir=='bottom')
         {
            $('#'+id+'_title_bar').hide();
            $j('#'+id+'_1').height($j('#'+id).height()-2);
            var _height=$j('#'+id+'_1').innerHeight()-22;
            $j('#'+id+'_contain').height(_height);
            $('#'+id).animate({height: "toggle",bottom:'0px'},'slow'); 
          }
   }
   );
    
}
//***
$j.panelShow=function(id,dir){
    var hei=$('#'+id+'_hid_bar_'+dir).height();
    var wid=$('#'+id+'_hid_bar_'+dir).width();
    if (dir=='left' || dir=='right')
	    $('#'+id+'_hid_bar_'+dir).animate({width: "hide",height:hei},'fast',function(){
                                 $('#'+id).animate({width: "show"},'slow');
        });
    else if (dir=='top' || dir=='bottom')
         $('#'+id+'_hid_bar_'+dir).animate({height: "hide",width:wid},'fast',function(){
                                 $('#'+id).animate({height: "show"},'slow');
        });
        
    if(dir=='left')
            $('#'+id).css('left','0px');
      else if(dir=='right')
            $('#'+id).css('right','0px');
     $('#'+id).resizable('enable');
     $('#'+id+'_bar_nav_img').show();
     $('#'+id+'_bar_close_img').show();  
     $('#'+id+'_title_bar').show();//bottom
}
$j.panelHide=function(id,dir){
     var hei=$('#'+id).height();
     var wid=$('#'+id).width();
     if (dir=='left' || dir=='right')
       $j('#'+id).animate({width: 'hide',height:hei},'slow',function(){
                               $j('#'+id+'_hid_bar_'+dir).animate({width: 'show'},'fast');
                                $j('#'+id+'_hid_bar_'+dir).height(hei);
       });
     else if (dir=='top' || dir=='bottom')
       $j('#'+id).animate({height: 'hide',width:wid},'slow',function(){
                                $j('#'+id+'_hid_bar_'+dir).width(wid);
                                $j('#'+id+'_hid_bar_text_'+dir).width(wid-32);
                                $j('#'+id+'_hid_bar_'+dir).animate({height: 'show'},'fast');
       });
     
      if(dir=='left')
            $('#'+id).css('left','0px');
      else if(dir=='right')
            $('#'+id).css('right','0px');
      else if(dir=='top')
            $('#'+id).css('top','0px');
      else if(dir=='bottom')
            $('#'+id).css('bottom','0px');
     

}
$j.panelClose=function(id){
      $j('#'+id).hide();
}
